<template>
  <div class="HighPressure">
    <div class="center">
      <el-form
        :model="HighPressure101"
        :rules="rules"
        ref="HighPressure101"
        label-width="282px"
      >
        <el-form-item :label="$t('启用') + '：'" prop="isOpen1011">
          <div class="isopen">
            <el-switch
              v-model="HighPressure101.isOpen1011"
              :active-value="1"
              :inactive-value="0"
              active-color="#00D1FF"
              inactive-color="#dcdfe6"
              active-text="ON"
              inactive-text="OFF"
            >
            </el-switch>
          </div>
        </el-form-item>
        <div v-if="HighPressure101.isOpen1011">
          <el-form-item :label="$t('巡视主机服务端IP') + '：'" prop="serverIp">
            <el-input
              v-model="HighPressure101.serverIp"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('巡视主机服务端端口') + '：'"
            prop="serverPort"
          >
            <el-input
              v-model="HighPressure101.serverPort"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('巡检主机唯一标识') + '：'"
            prop="receiveCode"
          >
            <el-input
              v-model="HighPressure101.receiveCode"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('机器人主机唯一标识') + '：'"
            prop="sendCode"
          >
            <el-input
              v-model="HighPressure101.sendCode"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('机器人编码') + '：'" prop="robotCode">
            <el-input
              v-model="HighPressure101.robotCode"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('机器人名称') + '：'" prop="robotName">
            <el-input
              v-model="HighPressure101.robotName"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('协议根节点') + '：'" prop="xmlRootElement">
            <el-input
              v-model="HighPressure101.xmlRootElement"
              :placeholder="$t('如PatrolDeviceRobot')"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <div class="btns area-btn">
            <div
              @click="submitForm('HighPressure101')"
              class="serch-btn cursor-pointer"
              style="width: 80px"
            >
              {{ $t("保存") }}
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getHighPressure, handeleSaveConfig10011 } from "@/api/system/network";
export default {
  data() {
    return {
      HighPressure101: {
        isOpen1011: "",
        serverIp: "",
        serverPort: "",
        receiveCode: "",
        sendCode: "",
        robotCode: "",
        robotName: "",
        xmlRootElement: "",
      },
      rules: {
        serverIp: [
          {
            required: true,
            message: this.$t("请输入巡视主机服务端IP"),
            trigger: "blur",
          },
          {
            pattern:
              /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/,
            message: this.$t("请输入正确的IP"),
            trigger: "blur",
          },
        ],
        serverPort: [
          {
            required: true,
            message: this.$t("请输入巡视主机服务端端口"),
            trigger: "blur",
          },
          {
            pattern: /^\d+$/,
            message: this.$t("请输入正确的端口"),
            trigger: "blur",
          },
        ],
        receiveCode: [
          {
            required: true,
            message: this.$t("请输入巡检主机唯一标识"),
            trigger: "blur",
          },
        ],
        sendCode: [
          {
            required: true,
            message: this.$t("请输入机器人主机唯一标识"),
            trigger: "blur",
          },
        ],
        robotCode: [
          {
            required: true,
            message: this.$t("请输入机器人编码"),
            trigger: "blur",
          },
        ],
        robotName: [
          {
            required: true,
            message: this.$t("请输入机器人名称"),
            trigger: "blur",
          },
        ],
        xmlRootElement: [
          {
            required: true,
            message: this.$t("请输入协议根节点"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.hangetHighPressure();
  },
  methods: {
    // 获取10011数据
    hangetHighPressure() {
      getHighPressure().then((res) => {
        if (res.code == 200) {
          this.HighPressure101.serverIp = res.data.serverIp;
          this.HighPressure101.serverPort = res.data.serverPort;
          this.HighPressure101.receiveCode = res.data.receiveCode;
          this.HighPressure101.sendCode = res.data.sendCode;
          this.HighPressure101.robotCode = res.data.robotCode;
          this.HighPressure101.robotName = res.data.robotName;
          this.HighPressure101.xmlRootElement = res.data.xmlRootElement;
          this.HighPressure101.isOpen1011 = res.data.isOpen1011 * 1;
        }
      });
    },
    // 保存按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          handeleSaveConfig10011(this.HighPressure101).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("保存成功"),
                duration: 2000,
              });
            } else {
              this.$message({
                showClose: true,
                message: this.$t("保存失败请重试"),
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.HighPressure {
  width: 100%;
  height: 950px;
  .center {
    width: 700px;
    margin-top: 20px;
  }
}

.isopen {
  ::v-deep .el-switch__label--left {
    position: relative;
    left: 55px;
    color: #fff !important;
    z-index: -1111;
  }
  ::v-deep.el-switch__core {
    width: 60px !important;
  }
  ::v-deep.el-switch__label--right {
    position: relative;
    right: 56px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep.el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep.el-switch__label--left.is-active {
    z-index: 1111;
    color: #fff !important;
  }
}
::v-deep .el-input__inner {
  width: 300px;
}
</style>
